<template>
    <div>
        <el-dialog v-model="dialogFlag" :title="tit" width="30%" :close-on-modal="false">
            <el-form :model="formList" :rules="rules" ref="formRef">
                <el-row>
                    <el-col :span="12">
                        <el-form-item prop="channelId" label="渠道来源" label-width="80">
                            <el-select v-model="formList.channelId" placeholder="渠道来源" clearable>
                                <el-option v-for="item in channelList" :key="item.channelId" :value="item.channelId"
                                    :label="item.channelName" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="name" label="活动名称" label-width="80">
                            <el-input v-model="formList.name" placeholder="请输入活动名称" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item prop="activityTime" label="活动日期" label-width="80">
                            <el-date-picker v-model="formList.timeData" type="daterange" range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期" prefix-icon="PieChart" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="info" label="活动简介" label-width="80">
                            <el-input v-model="formList.info" placeholder="请输入活动名称" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item prop="type" label="活动类型" label-width="80">
                            <el-select v-model="formList.type" placeholder="活动类型" clearable>
                                <el-option :value="1" label="折扣卷" />
                                <el-option :value="2" label="代金券" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item prop="discount" :label="discountTit" label-width="80" v-if="formList.type">
                            <el-input-number v-model="formList.discount" :min="0" :precision="2" :step="0.1"
                                placeholder="请输入代金卷面值" style="width: 265px" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <el-button type="primary" @click="handleList">确定</el-button>
                <el-button @click="dialogFlag = false">取消</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { computed, watch } from 'vue'
import { PieChart } from '@element-plus/icons-vue'
import dayjs from 'dayjs'

// 接收父组件传递的数据
const props = defineProps(['titFlag', 'channelList'])

// 发送给父级的方法
const emit = defineEmits(['formData'])

// 表单数据
const obj = {
    channelId: null,
    discount: null,
    info: null,
    name: null,
    type: null,
    activityTime: [],
    beginTime: null,
    endTime: null,
    timeData: [] // 用于转换时间
}

const formList = ref({ ...obj })

// 表单校验
const rules = ref({
    channelId: [
        { required: true, message: '请选择渠道来源', trigger: 'blur' }
    ],
    name: [
        { required: true, message: '请输入活动名称', trigger: 'blur' }
    ],
    activityTime: [
        { required: true, message: '请选择活动日期', trigger: 'blur' }
    ],
    info: [
        { required: true, message: '请输入活动简介', trigger: 'blur' }
    ],
    type: [
        { required: true, message: '请选择活动类型', trigger: 'blur' }
    ],
    discount: [
        { required: true, message: '请输入活动明细', trigger: 'blur' }
    ]
})

// 判定 代金卷 or 折扣卷
const discountTit = ref('')
watch(() => formList.value.type, (newVal) => {
    if (newVal === 1) {
        discountTit.value = '折扣卷'
    } else {
        discountTit.value = '代金券'
    }
})

// 接收判断新增或修改
const tit = computed(() => {
    return props.titFlag === 'add' ? '添加活动' : '修改活动'
})

// 接收开关
const dialogFlag = defineModel('dialogFlag')

// 清空弹窗内容
const formRef = ref(null)
watch(() => dialogFlag.value, (newVal) => {
    if (newVal === false) {
        formRef.value.resetFields()
        formList.value = { ...obj }
    }
})

// 监听时间的变化
watch(() => formList.value.timeData, (newVal) => {
    if (newVal.length === 2) {
        formList.value.activityTime = newVal.map(item => dayjs(item).format('YYYY-MM-DD HH:mm:ss'))
        formList.value.beginTime = formList.value.activityTime[0]
        formList.value.endTime = formList.value.activityTime[1]
    }
})

// 处理数据 && 发送
const handleList = async () => {
    try {
        await formRef.value.validate()
        emit('formData', formList.value)
        dialogFlag.value = false
    } catch (err) { }
}

defineExpose({
    formList
})

</script>

<style lang="scss" scoped></style>